<template lang="pug">
  Card(title='权限设置')
    Form(ref='roleForm',:label-width='80',inline,:model='formValidate',:rules='rulesValidate').roleSet-header
      FormItem(label='角色名：')
        Input(placeholder='角色名',v-model='formValidate.roleName',style='width:300px')
      FormItem
        Button(type='primary',@click='handleCheckChange') 确定
        Button(style='margin-left:10px',@click='$router.push("/supervise/role")') 返回
    p.roleSet-body 详细配置：
      Tree(ref='roleTree',:data='roleListData',show-checkbox)
</template>

<script>
import { asyncRole } from '../api'

export default {
  name: 'RoleSetting',
  data() {
    return {
      formValidate: {
        roleName: ''
      },
      rulesValidate: {
        roleName: [{ required: true, pattern: /^([\u4e00-\u9fa5]|\d)*$/, message: '角色名必须是中文或数字', trigger: 'blur' }]
      },
      roleListData: []
    }
  },
  created() {
    if (this.$route.query.status === 'modify') {
      this.getRoleData()
      this.formValidate.roleName = this.$route.query.name
    }
    if (this.$route.query.status === 'add') {
      this.roleListData = this.filterRoleData(JSON.parse(sessionStorage.roleData))
    }
    this.$nextTick(() => {
      this.$store.dispatch('breadcrumb/getBreadCrumb', [])
    })
  },
  methods: {
    filterChecked(data, checkData) {
      for (const i in data) {
        for (const key in checkData) {
          if (data[i].moduleId === checkData[key]) {
            data[i].checked = true
          }
        }
        if (data[i].children) {
          this.filterChecked(data[i].children, checkData)
        }
      }
      return data
    },
    getRoleData: async function() {
      try {
        const roleData = await asyncRole.getRoleRight({ data: { roleId: this.$route.query.roleId } })
        this.roleListData = this.filterChecked(this.filterRoleData(roleData.data.data.roleRightVoList), roleData.data.data.selectedRightList)
      } catch (error) {}
    },
    filterRoleData(data) {
      for (const i in data) {
        data[i].title = data[i].moduleName
        // data[i].expand = true
        data[i].children = data[i].childrenRoleRight
        if (data[i].childrenRoleRight && data[i].childrenRoleRight.length !== 0) {
          this.filterRoleData(data[i].childrenRoleRight)
          delete data[i].isCheck
          delete data[i].moduleName
          delete data[i].childrenRoleRight
        } else {
          delete data[i].isCheck
          delete data[i].children
          delete data[i].expand
          delete data[i].moduleName
          delete data[i].childrenRoleRight
        }
      }
      return data
    },
    handleCheckChange: async function() {
      const newRoleData = this.$refs['roleTree'].findIviewTreeData().map(item => {
        return { moduleId: item.moduleId }
      })
      const selectJson = this.$refs['roleTree'].getCheckedNodes().map(item => item.moduleId)
      try {
        if (this.$route.query.status === 'add') {
          await asyncRole.add({ data: { roleName: this.formValidate.roleName, rightJson: JSON.stringify(newRoleData), selectJson: JSON.stringify(selectJson) } })
          this.$router.push('/supervise/role')
          this.$Message.success('权限添加成功')
        } else {
          await asyncRole.update({
            data: { roleName: this.formValidate.roleName, roleId: this.$route.query.roleId, rightJson: JSON.stringify(newRoleData), selectJson: JSON.stringify(selectJson) }
          })
          this.$router.push('/supervise/role')
        }
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss">
.roleSet {
  &-header {
    .ivu-form-item {
      &:last-of-type {
        .ivu-form-item-content {
          margin-left: 0 !important;
        }
      }
    }
  }
  &-body {
    padding: 0 10px;
    .ivu-tree {
      padding: 0 10px;
    }
  }
}
.ivu-tree {
  div {
    clear: both;
    display: table;
    content: '';
  }
  .ivu-tree-childtrn-item {
    float: left;
  }
}
</style>


